<template>
  <div>
  <el-row>
   <bread-crumb first="系统设置" second="用户管理"> </bread-crumb>
  </el-row>

    <el-row>
      <el-form class="demo-ruleForm" label-width="80px">
        <el-col :span="6">
        <el-form-item  label="用户名">
          <el-input   v-model="query.username"/>

        </el-form-item>
        </el-col>

        <el-col :span="6">
          <el-form-item label="用户类别">
            <el-select v-model="query.adminType">
         <!--数据来自ajax v-for-->

              <el-option :key="index"
                         :label="adminType.type"
                         :value="adminType.id"  v-for="(adminType,index) in query.typeList">

              </el-option>
             <!-- <el-option label="normal" value="上海"> </el-option>
              <el-option label="admin" value="广州"> </el-option>
              <el-option label="guest" value="北京"> </el-option>-->


            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="1">
          <el-form-item >
            <el-button  @click="queryList({
              username:query.username,
              adminType:query.adminType
            })" type="success">
              <i class="fa fa-search" aria-hidden="true"></i>搜索</el-button>
          </el-form-item>
        </el-col>

      </el-form>

    </el-row>

    <el-row>
      <el-button-group style="float: left">
        <el-button round type="success" icon="el-icon-plus" @click="dialog.dialogFormVisible=true" size="small">添加</el-button >
        <el-button type="primary" icon="el-icon-edit" size="small">修改</el-button>
        <el-button round type="danger" icon="el-icon-delete"  size="small">删除</el-button>
      </el-button-group>

    </el-row>

  <el-table
    :data="list.slice((currpage - 1) * pagesize, currpage * pagesize)"
    border
    style="width: 100%">

    <el-table-column prop="username" label="姓名" > </el-table-column>

    <el-table-column prop="password" label="密码" > </el-table-column>

    <el-table-column prop="nickname" label="昵称" > </el-table-column>

    <el-table-column prop="adminType.type" label="用户类别" > </el-table-column>

    <el-table-column prop="usable" label="是否启用" >
   <template slot-scope="scope">
      <i class="fa" :class="scope.row.usable|changeBoolToTag"> </i>
    </template>
    </el-table-column>
    <el-table-column label="操作">
    <template>
      <el-button-group>
        <el-button plain type="primary" icon="el-icon-edit"  size="small">修改</el-button>
        <el-button plain type="danger" icon="el-icon-delete" size="small">删除</el-button>
      </el-button-group>
    </template>

  </el-table-column>



  </el-table>
    <el-pagination
      background
      :current-page="currpage"
      layout="prev, pager, next, sizes, total, jumper"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pagesize"
      :total="list.length"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    >
    </el-pagination>


    <el-dialog :visible.sync="dialog.dialogFormVisible" title="添加用户">
      <el-form label-width="80px">
        <el-form-item  label="用户名">
          <el-input v-model="dialog.user.username"> </el-input>
        </el-form-item>

        <el-form-item label="用户类别">
          <el-select v-model="dialog.user.adminType" style="width: 100%">
            <el-option :key="index"
                       :label="adminType.type"
                       :value="adminType.id" v-for="(adminType,index) in query.typeList">

            </el-option>
          <!--  <el-option label="normal" value="上海"> </el-option>
            <el-option label="admin" value="广州"> </el-option>
            <el-option label="guest" value="北京"> </el-option>-->
          </el-select>

        </el-form-item>

        <el-form-item  label="密码">
          <el-input v-model="dialog.user.password"> </el-input>
        </el-form-item>

        <el-form-item  label="昵称">
          <el-input v-model="dialog.user.nickname"> </el-input>
        </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="insertHandle" style="width:60%">保存</el-button>
  </el-form-item>
      </el-form>

    </el-dialog>

  </div>
</template>

<script>
  import BreadCrumb from '../../components/ Breadcrumb/indexBreadcrumd'

    export default {

      name: "user",
        data:function () {
        return{
          pagesize:5,
          currpage: 1,
          list:[],
          query:{
            adminType:'',
            username:'',
            typeList:[]
          },
          dialog:{
            dialogFormVisible:false,
            user:{
              username:'',
              adminType:'',
              nickname:'',
              password:''

          }
          }
         }
        },


      components:{
          BreadCrumb
      },
      mounted() {
        this.queryList();
        this.initAdminType();

      },
      methods:{
        queryList:function(user) {
          let _this = this;
          this.axios({
            url: '/mock/users/list',
            method: 'get'
          }).then(function (res) {
            _this.list = res.data.list;
            /*alert(username);*/

           /* console.log(user);
            console.log(user.username);*/
          //  console.log(user.adminType);
            if(user){
              _this.list =_this.list.filter((item)=>{
                return item.username.includes(user.username)
               &&item.adminType.id == user.adminType;
              })

            }
          });
        },

 queryForSave:function(user) {
    let _this = this;
    this.axios({
      url: '/mock/users/list',
      method: 'get',
    }).then(function (res) {
      _this.list = res.data.list;
      _this.list.unshift(user);
      _this.dialog.dialogFormVisible=false;
    })
  },


        initAdminType:function () {
         let _this= this;
         this.axios({
           url: '/mock/users/adminTypes',
           method: 'get',

         }).then((res)=>{


           _this.query.typeList = res.data;
           console.log("typelist:");
           console.log( _this.query.typeList );
          })
        },

        insertHandle:function () {
           const adminTypes =[
             {
               id:1,
               type:'normal'
             },{
               id:2,
               type:'admin'
             },{
               id:3,
               type:'guest'
             }
           ]
          this.dialog.user.adminType=adminTypes.filter((item)=>{
            return item.id == this.dialog.user.adminType;
          })[0];

          this.queryForSave(this.dialog.user);

        }, handleCurrentChange(cpage) {
          this.currpage = cpage;
        },
        handleSizeChange(psize) {
          this.pagesize = psize;
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;

        },
      }
    }
</script>

<style scoped>
  .el-row{
    margin-bottom: 20px;
  }


</style>
